<template>
  <div :ref="`echarts-bar${id}`" :style="{height:height}" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartsOnebar',
  props: {
    xAxisName: {
      type: String,
      default: ''
    },
    seriesName: {
      type: String,
      default: '设备个数'
    },
    countExploration: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '240px'
    }
  },
  data() {
    return {
      echarts: null,
      // 柱子类型及数据
      equTypeList: [],
      equCountList: []
    }
  },
  watch: {
    countExploration(values) {
      this.InitEcharts(values)
    }
  },
  mounted() {
    this.InitEcharts(this.countExploration)
  },
  beforeDestroy() { // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.echarts && this.echarts.dispose()
  },
  methods: {
    InitEcharts(values) {
      this.equCountList = []
      this.equTypeList = []
      values.forEach(item => {
        this.equCountList.push(item.countEquipment)
        this.equTypeList.push(item.equipmentTypeName)
      })
      const options = {
        tooltip: {
        // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: 50,
          right: 65,
          bottom: 45
        },
        xAxis: {
          name: this.xAxisName,
          nameTextStyle: {
            color: '#fff'
          },
          type: 'category',
          data: this.equTypeList,
          axisLabel: {
            color: '#fff',
            fontSize: 12
            // interval: 0,
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: [
          {
            name: '(个)',
            min: 0,
            max: 5,
            type: 'value',
            minInterval: 1,
            nameTextStyle: {
              color: '#fff'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#eee',
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                color: ['#12fffe'],
                type: 'dotted'
              }
            }
          }
        ],
        series: [
          {
            name: this.seriesName,
            data: this.equCountList,
            type: 'bar',
            barWidth: '10px',
            itemStyle: {
              color: '#00ffe6',
              barBorderRadius: [180]
            },
            yAxisIndex: 0
          }
        ]
      }
      this.echarts = echarts.init(this.$refs[`echarts-bar${this.id}`])
      this.echarts.setOption(options)
      this.echarts.on('click', this.checkPerson)
      window.addEventListener('resize', this.resizeHandler)
    },
    resizeHandler() {
      this.echarts.resize()
    },
    checkPerson({ name }) {
      this.$emit('setEquipment', name)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
